<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="ring"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25
        },
        title: {
          name: "今日计划",
          fontSize: 15,
          color: "#666666"
        },
        subtitle: {
          name: "完成占比",
          fontSize: 15,
          color: "#7cb5ec"
        },
        extra: {
          ring: {
            ringWidth: 40,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      }
    };
  },
  created() {
      this.getServerData();
  },
  methods: {
    getServerData() {
		const url = '/api/habit_former/admin/dashboard/finished_plan_by_type';
		uni.request({
		  url: url,
		  method: 'GET',
		  success: (res) => {
				// console.log(res);		
		    if (res.data.code === 200) {
				const data = res.data.data;
				// 处理响应数据，根据业务逻辑过滤和转换数据
				let seriesData = [];
				let total = res.data.data.dailyPlan + res.data.data.fitPlan + res.data.data.studyPlan;
				if (total === 0) {
					// 如果三个计划都为0，显示一个"当日没有完成计划"的饼状图
					seriesData.push({ name: "当日没有完成计划", value: 100 });
				} 
				else {
					// 否则，根据实际数据进行填充
					if (res.data.data.dailyPlan > 0) {
						seriesData.push({ name: "日常计划", value: res.data.data.dailyPlan });
					}
					if (res.data.data.fitPlan > 0) {
						seriesData.push({ name: "健身计划", value: res.data.data.fitPlan });
					}
					if (res.data.data.studyPlan > 0) {
						seriesData.push({ name: "学习计划", value: res.data.data.studyPlan });
					}
				}
				// 更新图表数据
				this.chartData = {
				  series: [{ data: seriesData }]
				};
			}
		},
		fail: (err) => {
          console.error('Failed to fetch data:', err);
        },
    });
	}
  }
};
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>
